<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <%@ include file="/common/plateform/include/common-base.jsp"%>
  <title>${titleName}-资料上传</title>
  <style>
      .file-items-box {
          padding: 2px 2px;
          text-align: center;
          margin-top: 5px;
          width:150px;
          height:135px;
          border: 1px solid #f0f0f0;
          position: relative;
      }
      .file-items-box img{
          width: 100%;
          height: 100%;
          display: block;
      }
      .file-items-box i{
          display: none;
          position: absolute;
          cursor: pointer;
          right: 3px;
          top: 3px;
          color: #fff;
      }
      .file-items-box:hover i{
          display: block;
      }
      .file-upload-box{
          padding: 2px 2px;
          text-align: center;
          margin-top: 5px;
          width:150px;
          height:135px;
          border:1px #999 dashed;
      }
      .file-upload-box .do-click{
          width:100%;
          height:110px;
          text-align: center;
          vertical-align: middle;
          line-height:110px;
          font-size:60px;
          color:#999;
          cursor: pointer;
      }
      .file-upload-box .tips{
          font-size:10px;
          color:#999;
      }
  </style>
</head>
<body class="${sysColor} sidebar-collapse">
<div class="wrapper">

   <div class="content-wrapper">
  <div class="row">
	<!-- Main content -->
    <section class="container">
      <!-- Small boxes (Stat box) -->
      <div class="row" style="margin-top:20px;">
        <div class="col-md-12" id="fileTypeList-body">

 <!--
            <div class="box box-solid">
              <div class="box-header">
                  <h3 class="box-title">店铺图片</h3>
              </div>
              <div class="box-body">
                  <div class="col-xs-12 file-preview">
                      <div file-box="true" data-upload-folder="order" class='col-xs-3 file-items-box file-upload-box'>
                          <label class="do-click" onclick="addUploadFileBox(this);" for="uploadFileInputNew">+</label>
                          <div class="tips">推荐尺寸 200px × 350px</div>
                      </div>
                  </div>
              </div>
            </div>
-->

        </div>
      </div>
      
      <!-- /.row -->
    </section>

<script type="text/template" id="fileTypeList-template">
  <? for ( var i = 0; i < rows.length; i++) {?>
  <div class="box box-solid" id="file-box-<?=rows[i].code?>">
      <div class="box-header">
          <h3 class="box-title"><?=rows[i].title?></h3>
      </div>
      <div class="box-body">
          <div class="col-xs-12 file-preview">
              <div file-box="true" data-upload-folder="<?=rows[i].code?>" class="col-xs-3 file-items-box file-upload-box">
                  <label class="do-click" onclick="addUploadFileBox(this);" for="uploadFileInputNew">+</label>
                  <div class="tips">推荐尺寸 200px × 350px</div>
              </div>
          </div>
      </div>
  </div>
  <?}?>
</script>
<script type="text/template" id="fileItemBox-template">
  <div class="col-xs-3 file-items-box">
      <img src="<?=attachUrl?>" onclick="previewImage(this)">
      <input type="hidden" name="prpAttachFile.objId" value="<?=objId?>">
      <input type="hidden" name="prpAttachFile.attachUrl" value="<?=attachUrl?>">
      <input type="hidden" name="prpAttachFile.attachFolder" value="<?=attachFolder?>">
      <input type="hidden" name="prpAttachFile.attachName" value="<?=attachName?>">
      <input type="hidden" name="prpAttachFile.attachType" value="<?=attachType?>">
      <input type="hidden" name="prpAttachFile.orderNum" value="<?=orderNum?>">
      <i onclick="delFile(this)" class="fa fa-close"></i>
  </div>
</script>

<script>
    var typeStr = '[{"code":"shop","title":"店铺图片资料"},{"code":"car","title":"车损图片资料"},{"code":"goods","title":"物损图片资料"}]';
    <%--var typeStr=decodeURIComponent('${param.typeStr}');--%>
    var showType='add';
    var objId = '1112222';
    var typeArr = JSON.parse(typeStr);
    var myDataList = {rows:typeArr};
    var formId = "#form_submit_data",dataListId = "fileTypeList",fileItemBoxId="fileItemBox";
    var data = baidu.template(dataListId + "-template", eval(myDataList));
    $("#" + dataListId + "-body").html(data);

    function addUploadFileBox(obj) {
        addUploadFileNewByOption(obj,{
            sysName:'labf',
            url:'${ctx}/api/uploadFile',//为空是平台默认上传地址
            confData:JSON.stringify({waterFlag:'T',waterText:'',waterType:'2'})
        });
    }
    function myBack(obj,myData) {
        console.log("myBack",obj,myData);
        if(myData && obj){
            var fileBoxObj = obj.parent();
            if(isNull(fileBoxObj.attr("file-box"))){
                fileBoxObj = obj.parent().parent();
            }
            var folder = fileBoxObj.attr("data-upload-folder");
            var typeBodyObj = fileBoxObj.parent();
            var boxCount = typeBodyObj.find(".file-items-box").length;
            boxCount++;
            if(myData.flag=='T'){
                var murl = myData.murl;
                var fileType = myData.fileType;
                var fileNameNew = myData.fileNameNew;
                var dataObj={
                    objId:objId,
                    attachUrl:murl,
                    attachFolder:folder,
                    attachName:fileNameNew,
                    attachType:fileType,
                    orderNum:boxCount
                };
                var dataHtmls = baidu.template(fileItemBoxId+"-template", eval(dataObj));
                if(fileBoxObj){
                    fileBoxObj.before(dataHtmls);
                }
                countNumSeq(typeBodyObj);
            }
        }
    }
    //计算序号
    function countNumSeq(typeBodyObj) {
        if(typeBodyObj){
            typeBodyObj.find(".file-items-box").each(function (index,item) {
                // console.log(index,item);
                $(this).find("input[name='prpAttachFile.orderNum']").val(index+1);
            });
        }
    }

    //删除box元素
    function delFile(obj) {
        var itemsBox = $(obj).parent();
        var typeBodyObj = itemsBox.parent();
        itemsBox.remove();
        countNumSeq(typeBodyObj);
    }

    function previewImage(obj) {
        var url = $(obj).attr("src");
        layer.open({
            title: '预览',
            type: 1,
            maxmin:true,
            shade: 0.6,
            shadeClose: true, //开启遮罩关闭
            area: ['80%', '90%'],
            content: "<div style='width:100%;padding:5px;text-align: center;'> <img src='"+url+"'></div>"
        });
    }

</script>
 	
 </div>
 </div>


</div>

</body>
</html>

<script>
var clickMenu= 'plateForm-index';

</script>


